<template>
  <Dialog title="呼叫名单列表" v-model="dialogVisiblelist" width="1000" class="call-list-dialog">
    <div class="dialog-content">
      <!-- 头部区域 -->
      <div class="dialog-header">
        <div class="header-icon">
          <Icon icon="ep:list" />
        </div>
        <div class="header-content">
          <h3 class="dialog-title">呼叫名单管理</h3>
          <p class="dialog-subtitle">管理和维护所有呼叫名单</p>
        </div>
      </div>

      <!-- 操作区域 -->
      <div class="action-section">
        <el-button type="primary" @click="openForm('create')" class="create-btn">
          <Icon icon="ep:plus" class="btn-icon" />
          新增名单
        </el-button>
      </div>

      <!-- 表格区域 -->
      <div class="table-container">
        <el-table :data="list" class="enhanced-table">
          <el-table-column
            prop="name"
            label="名单名称"
            align="center"
            min-width="150"
            show-overflow-tooltip
          >
            <template #default="scope">
              <div class="name-cell">
                <Icon icon="ep:document" class="name-icon" />
                <span class="name-text">{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="prop" label="状态" width="100" align="center">
            <template #default="scope">
              <el-tag
                :type="
                  scope.row.status === 0 ? 'success' : scope.row.status === 1 ? 'warning' : 'danger'
                "
                class="status-tag"
                size="small"
              >
                <Icon
                  :icon="
                    scope.row.status === 0
                      ? 'ep:check'
                      : scope.row.status === 1
                        ? 'ep:loading'
                        : 'ep:close'
                  "
                  class="tag-icon"
                />
                {{
                  scope.row.status === 0 ? '可用' : scope.row.status === 1 ? '正在导入' : '不可用'
                }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column
            prop="createTime"
            :formatter="dateFormatter"
            label="创建时间"
            align="center"
            width="180"
          />

          <el-table-column prop="prop" label="操作" align="center" width="300" fixed="right">
            <template #default="scope">
              <div class="flex">
                <el-button type="primary" @click="handleEdit(scope.row.id)" link class="action-btn">
                  <Icon icon="ep:edit" class="btn-icon" />
                  编辑
                </el-button>
                <el-button type="success" @click="handleAdd(scope.row.id)" link class="action-btn">
                  <Icon icon="ep:plus" class="btn-icon" />
                  追加
                </el-button>
                <el-button type="primary" @click="handleSee(scope.row.id)" link class="action-btn">
                  <Icon icon="ep:view" class="btn-icon" />
                  预览
                </el-button>
                <el-button
                  type="danger"
                  @click="handleDelete(scope.row.id)"
                  link
                  class="action-btn"
                >
                  <Icon icon="ep:delete" class="btn-icon" />
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-wrapper">
          <Pagination
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </div>
  </Dialog>

  <CallListForm ref="callFormRef" @success="getList" />
  <CallSee ref="callSeeRef" />
</template>

<script setup>
import CallListForm from './callListForm.vue'
import { RecordApi } from '@/api/call/record'
import { dateFormatter } from '@/utils/formatTime'
import CallSee from './callSee.vue'

const message = useMessage()
const { t } = useI18n()
const dialogVisiblelist = ref(false)
const callFormRef = ref(null)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10
})
const total = ref(0)
const list = ref([])
const open = () => {
  dialogVisiblelist.value = true
  queryParams.pageNo = 1
  getList()
}
// 列表
const getList = async () => {
  const data = await RecordApi.getTaskCalleePage(queryParams)
  list.value = data.list
  total.value = data.total
}
defineExpose({ open })

/*新增呼叫名单*/
const openForm = (type, id) => {
  callFormRef.value.open(type, id)
}
/*删除*/
const handleDelete = async (id) => {
  try {
    await message.delConfirm()
    await RecordApi.deleteTaskCalle(id)
    ElMessage.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}
/*编辑*/
const handleEdit = async (id) => {
  callFormRef.value.open('update', id)
}
/*追加*/
const handleAdd = (id) => {
  callFormRef.value.open('add', id)
}
const callSeeRef = ref(null)
/*预览*/
const handleSee = (id) => {
  callSeeRef.value.open(id)
}
</script>

<style lang="scss" scoped>
.call-list-dialog {
  :deep(.el-dialog) {
    border-radius: 12px;
    overflow: hidden;

    @media (max-width: 768px) {
      width: 95% !important;
      margin: 20px auto;
    }
  }

  :deep(.el-dialog__header) {
    display: none;
  }

  :deep(.el-dialog__body) {
    padding: 0;
    max-height: 80vh;
    overflow-y: auto;
  }
}

.dialog-content {
  background: #f8fafc;
}

/* 对话框头部 */
.dialog-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  color: white;
  border-radius: 10px;

  @media (max-width: 768px) {
    padding: 20px;
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

.header-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;

  @media (max-width: 768px) {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

.header-content {
  flex: 1;
}

.dialog-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px 0;

  @media (max-width: 768px) {
    font-size: 18px;
  }
}

.dialog-subtitle {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

/* 操作区域 */
.action-section {
  padding: 20px 24px;
  background: white;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;

  @media (max-width: 768px) {
    padding: 16px 20px;
    justify-content: center;
  }
}

.create-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  color: white;
  transition: all 0.2s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.3);
  }

  @media (max-width: 768px) {
    width: 100%;
    max-width: 200px;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

/* 表格容器 */
.table-container {
  background: white;
  padding: 24px;

  @media (max-width: 768px) {
    padding: 16px;
    overflow-x: auto;
  }
}

.enhanced-table {
  :deep(.el-table__header) {
    background: #f8fafc;

    th {
      background: #f8fafc !important;
      color: #374151;
      font-weight: 600;
      border-bottom: 2px solid #e5e7eb;
    }
  }

  :deep(.el-table__row) {
    &:hover {
      background: rgba(0, 82, 204, 0.02) !important;
    }
  }

  :deep(.el-table__cell) {
    padding: 12px 8px;
    border-bottom: 1px solid #f1f5f9;
  }
}

.name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.name-icon {
  color: #0052cc;
  font-size: 16px;
  flex-shrink: 0;
}

.name-text {
  color: #1f2937;
  font-weight: 500;
}

.status-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;

  .tag-icon {
    font-size: 12px;
  }
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;

  @media (max-width: 768px) {
    gap: 6px;
  }
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
  min-width: 60px;
  justify-content: center;

  &:hover {
    background: rgba(0, 82, 204, 0.1);
  }

  .btn-icon {
    font-size: 12px;
  }
}

.pagination-wrapper {
  padding: 20px 0;
  display: flex;
  justify-content: center;

  :deep(.el-pagination) {
    @media (max-width: 768px) {
      .el-pagination__sizes,
      .el-pagination__jump {
        display: none;
      }
    }
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .dialog-content {
    background: #1f2937;
  }

  .action-section,
  .table-container {
    background: #374151;
    border-color: rgba(255, 255, 255, 0.1);
  }

  .dialog-title {
    color: #f9fafb;
  }

  .name-text {
    color: #f9fafb;
  }

  .enhanced-table {
    :deep(.el-table__header) {
      background: #4b5563;

      th {
        background: #4b5563 !important;
        color: #f9fafb;
        border-bottom-color: #6b7280;
      }
    }

    :deep(.el-table__cell) {
      border-bottom-color: #4b5563;
    }
  }
}
</style>
